<template>
  <div :id="id">
  </div>
</template>
<style>
</style>
<script type="text/ecmascript-6">
  import config from './baidu.conf'

  /**
   * 百度地图组件，基于vue2.0 es6标准
   * created by lvjia on 20170302
   */
  export default {
    data () {
      return {
        // 本地map实例
        _map: null,
        // 本地location信息
        _geolocation: null,
        // 本地坐标信息
        _coordinates: null,
        _locationName: '',
        searchResult: null
      }
    },
    props: {
      // 传入要插入地图的div id
      id: {
        type: String,
        default: 'allmap'
      },
      // 传入初始化经纬度坐标
      coordinates: {
        type: Object
      },
      // 传入初始化缩放级别
      zoom: {
        type: Number,
        default: 15
      }
    },
    methods: {
      /**
       * 初始化本地map实例，传入脚本运行后挂载的BMap对象
       * @param BMap
       */
      _initMap (BMap) {
        this._map = new BMap.Map(this.id)
        this._geolocation = new BMap.Geolocation()
        this.refresh()
      },
      /**
       * 初始化地图脚本
       * @returns {*}
       */
      _loadScript () {
        if (!global.BMap) {
          return new Promise((resolve, reject) => {
            global._initBaiduMap = function () {
              resolve(global.BMap)
              global.document.body.removeChild($script)
              global._initBaiduMap = null
            }
            const $script = document.createElement('script')
            global.document.body.appendChild($script)
            $script.src = config.getScriptSrc()
          })
        }
        return Promise.resolve(global.BMap)
      },
      /**
       * 刷新地图并置中
       * @private
       */
      refresh () {
        let that = this
        this._geolocation.getCurrentPosition(function (resp) {
          if (this.getStatus() === config.BMAP_STATUS_SUCCESS) {
            var marker = new global.BMap.Marker(resp.point)
            that._coordinates = {
              lng: resp.point.lng,
              lat: resp.point.lat
            }
            let point = new global.BMap.Point(resp.point.lng, resp.point.lat)

            that._map.centerAndZoom(point, that.zoom)
            that._map.enableScrollWheelZoom()   // 启用滚轮放大缩小，默认禁用
            that._map.enableContinuousZoom()    // 启用地图惯性拖拽，默认禁用
            that._map.addOverlay(marker)

            // search nearby
            let local = new global.BMap.LocalSearch(that._map,
              {
                renderOptions: {
                  map: that._map,
                  autoViewport: true
                },
                pageCapacity: 100,
                onSearchComplete: () => {
                  that._locationName = local.getResults().getPoi(0).title
                  window.alert(local.getResults().getNumPois())
                  // 事件通知
                  that.$emit('loaded', {
                    lng: that._coordinates.lng,
                    lat: that._coordinates.lat,
                    name: that._locationName})
                }
              }
            )
            local.search('饭馆')
            // local.search('海南省')
          }
        })
      },
      getCurrentCoordinates () {
        return this._coordinates
      },
      getCurrentLocationName () {
        return this._locationName
      },
      setCenterPoint (point) {
        this._map.centerAndZoom(point, this.zoom)
      }
    },
    created () {
      console.log('created')
      const {_loadScript, _initMap} = this
      _loadScript().then(_initMap)
    }
  }
</script>
